<template>
	<view class="container">
		<!-- 连点器 -->
		<view class="head"
			:class="{'.home-head-bg1':currentBackground === 'bg1', '.home-head-bg2':currentBackground === 'bg2'}">
			<image class="userIcon" @click="goUser" src="@/static/style1/pathuser.png" mode="aspectFit"></image>
			<view class="word">
				连点器
			</view>
			<image class="shareIcon" src="@/static/style1/path.png" mode="aspectFit" @click="goShare"></image>
		</view>
		<!-- 开关 -->
		<view class="switch" @click="onswitch"
			:class="{'home-open-bg1':currentBackground === 'bg1', 'home-open-bg2':currentBackground === 'bg2'}">
		</view>

		<!-- 推广倒计时 -->
		<view class="content">
			<view class="count"
				:class="{'home-down-bg1':currentBackground === 'bg1', 'home-down-bg2':currentBackground === 'bg2'}">
				<uni-countdown :font-size="30" :show-day="false" color="#FFFFFF" splitorColor="#FFFFFF" border-color="#00B26A"
					:hour="2" :minute="0" :second="0"></uni-countdown>
			</view>
			<view class="word">
				推广增加时长
			</view>
			<view class="option"
				:class="{'home-border-bg1':currentBackground === 'bg1', 'home-border-bg2':currentBackground === 'bg2'}">
				<view class="option-content">
					<my-data-select :range="range"></my-data-select>
				</view>
				<!-- 默认方案1 -->
			</view>
		</view>
		<!-- 文本 -->
		<view class="firstText">
			<view class="online firstline"
				:class="{'.home-online1':currentBackground === 'bg1', '.home-online2':currentBackground === 'bg2'}">
				<view class="">
					跨应用支持
				</view>
				<view class="btn">
					<!-- 图片 -->
					<image v-if="currentBackground === 'bg1'" src="@/static/style1/icon.png" mode="aspectFit"></image>
					<image v-else src="@/static/style2/icon.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="online"
				:class="{'.home-online1':currentBackground === 'bg1', '.home-online2':currentBackground === 'bg2'}"
				@click="goOption">
				设置
			</view>
			<view class="online"
				:class="{'.home-online1':currentBackground === 'bg1', '.home-online2':currentBackground === 'bg2'}"
				@click="changeTheme">
				自定义ui
			</view>
		</view>
		<!-- 底部 -->
		<view class="towText">
			<text>新手指南</text>
			<text>常见问题</text>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				// 背景图片
				ImageBg: {
					backgroundImage1: 'url(' + require('@/static/style1/ym1.png') + ')',
					backgroundImage2: 'url(' + require('@/static/style2/ym1.png') + ')',
					backgroundImage3: 'url(' + require('@/static/style1/zh22.png') + ')',
					backgroundImage4: 'url(' + require('@/static/style2/zh22.png') + ')',
				},
				range: [{
						value: 0,
						text: "默认方案一"
					},
					{
						value: 1,
						text: "默认方案二"
					},
					{
						value: 2,
						text: "默认方案三"
					},
				],
			};
		},
		methods: {
			...mapMutations('theme', ['setCurThemeType']),
			// 跳转功能节面
			onswitch() {
				uni.navigateTo({
					url: '/pages/popup/popup'
				})
			},
			// 跳转用户信息
			goUser() {
				uni.navigateTo({
					url: '/pages/feature/personal/personal'
				})
			},
			// 跳转设置
			goOption() {
				uni.navigateTo({
					url: '/pages/feature/option/option'
				})
			},
			// 跳转分享
			goShare() {
				uni.navigateTo({
					url: '/pages/feature/share/share'
				})
			},
			// 自定义ui
			changeTheme() {
				this.setCurThemeType('bg1')
			}
		},
		computed: {
			...mapState('theme', ['currentBackground'])
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #11112B;
		color: #fff;
		position: relative;
		overflow: hidden;

		// 连点器
		.head {

			position: relative;
			height: 80rpx;
			position: relative;
			top: 10rpx;

			// background-size: cover;

			display: flex;
			justify-content: center;
			align-items: center;

			.word {
				// border: 1px solid red;
				height: 100%;
				position: relative;
				top: 15rpx;
			}

			.userIcon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				left: 10%;
				top: 35%;
			}

			.shareIcon {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				right: 10%;
				top: 35%;
			}
		}

		// 开关
		.switch {
			// border: 1px solid red;
			width: 540rpx;
			height: 540rpx;
			margin: 0 auto;
			position: relative;
			top: -20rpx;

		}

		.content {
			width: 100%;
			// border: 1px solid red;
			position: relative;
			top: -38rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.count {

				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 120rpx;
			}

			.word {

				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				margin: 10rpx 0;

			}

			.option {
				display: flex;
				justify-content: center;
				align-items: center;
				// border: 1px solid red;
				width: 360rpx;
				height: 100rpx;

				::v-deep .uni-icons::before {
					color: white;
					margin-left: 50rpx;
				}
			}
		}


		.firstText {
			width: 560rpx;
			// height: 200rpx;
			// border: 1px solid blue;
			margin: 0 auto;

			.online {
				margin: 20rpx 0;
				padding-bottom: 20rpx;
				// border-bottom: 1px solid rgba(229, 132, 251, 0.1);
			}

			.firstline {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.btn {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

		}

		.towText {

			height: 100%;

			text {
				display: block;
				text-align: center;
				margin-bottom: 3px;
			}
		}
	}
</style>